---
group: 'components'
category: 'state'
title: Tabs
description: 'Tabs make it easy to switch between different views.'
order: 1
---

## Basic Usage

```js live=true
() => (
  <Tabs>
    <Tab label="One" key="one">
      one
    </Tab>
    <Tab label="Two" key="two">
      Two
    </Tab>
    <Tab label="Three" key="three">
      Three
    </Tab>
  </Tabs>
)
```

## Card type tab

```js live=true
() => (
  <>
    <Tabs variant="line">
      <Tab label="One" key="one">
        one
      </Tab>
      <Tab label="Two" key="two">
        Two
      </Tab>
      <Tab label="Three" key="three">
        Three
      </Tab>
    </Tabs>

    <Tabs variant="outline" style={{ marginTop: '50px' }}>
      <Tab label="One" key="one">
        one
      </Tab>
      <Tab label="Two" key="two">
        Two
      </Tab>
      <Tab label="Three" key="three">
        Three
      </Tab>
    </Tabs>
  </>
)
```

## Direction

```js live=true
() => (
  <>
    <Tabs variant="line" direction="vertical">
      <Tab label="One" key="one">
        one
      </Tab>
      <Tab label="Two" key="two">
        Two
      </Tab>
      <Tab label="Three" key="three">
        Three
      </Tab>
    </Tabs>

    <Tabs variant="outline" direction="vertical" style={{ marginTop: '50px' }}>
      <Tab label="One" key="one">
        one
      </Tab>
      <Tab label="Two" key="two">
        Two
      </Tab>
      <Tab label="Three" key="three">
        Three
      </Tab>
    </Tabs>
  </>
)
```

## Position

```js live=true
() => (
  <>
    <Tabs variant="line" position="center">
      <Tab label="One" key="one">
        one
      </Tab>
      <Tab label="Two" key="two">
        Two
      </Tab>
      <Tab label="Three" key="three">
        Three
      </Tab>
    </Tabs>

    <Tabs variant="outline" position="right" style={{ marginTop: '50px' }}>
      <Tab label="One" key="one">
        one
      </Tab>
      <Tab label="Two" key="two">
        Two
      </Tab>
      <Tab label="Three" key="three">
        Three
      </Tab>
    </Tabs>
  </>
)
```

## grow

```js live=true
() => (
  <Tabs grow variant="line">
    <Tab label="One" key="one">
      one
    </Tab>
    <Tab label="Two" key="two">
      Two
    </Tab>
    <Tab label="Three" key="three">
      Three
    </Tab>
  </Tabs>
)
```
